<!-- 给大屏使用 -->
<template>
  <div class="mapview-pannel2">
    <el-alert title="请先选择合适的房屋类型" type="error" effect="dark"> </el-alert>
    <div class="top">
      <el-row class="rowclass">
        <el-col :span="6">
          房屋类型：
          <el-select v-model="houseValue" placeholder="请选择" @change="getHouseType">
            <el-option
              v-for="item in houseType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="danger" size="small" plain @click="clearMapView()"
            >清空所选房屋</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div id="mapview3"></div>
    <div id="clearDiv" class="clear"></div>
    <!-- 城镇住宅和城镇非住宅 -->
    <cityHouseInfo
      :showwindows.sync="showPop"
      :showwindowsid.sync="houseId"
      :chooseId.sync="typePlus"
      :typeDetails.sync="typeDetails"
      @setValue="setShow"
    />
    <!-- 农村独立住宅 农村集合住宅 -->
    <contryHuose
      :showWindowsfz.sync="showPop2"
      :chooseIdfz.sync="typePlus"
      :showWindowsfzId.sync="houseId"
      :typeDetails.sync="typeDetails"
      @setValue="setShow"
    />
    <!-- 农村非住宅 -->
    <contryNoHouse
      :showWindowsnon.sync="showPop3"
      :showWindowsnonId.sync="houseId"
      :typeDetails.sync="typeDetails"
      @setValue="setShow"
    />
  </div>
</template>

<script>
import { loadModules } from "esri-loader";

import cityHouseInfo from "@/views/housecomponents/cityHouseInfo";
import contryHouse from "@/views/housecomponents/contryHouse";
import contryNoHouse from "@/views/housecomponents/contryNoHouse";
import {
  getCityId,
  getNoCityId,
  getVillageDlId,
  getVillageJhId,
  getNonVillageId,
} from "../../api/gis";

export default {
  components: { cityHouseInfo, contryHouse, contryNoHouse },
  name: "Mapview",
  props: ["lat", "lon"],
  data() {
    return {
      typeDetails: 1,
      view1: {},
      map1: {},
      type: "", //判断下当前类型，加载不同的接口
      parksLayer: {},
      selectData: [], //框选中的房屋集合
      houseType: [
        {
          value: "1",
          label: "城镇住宅",
        },
        {
          value: "2",
          label: "城镇非住宅",
        },
        {
          value: "3",
          label: "农村独立住宅",
        },
        {
          value: "4",
          label: "农村非住宅",
        },
        {
          value: "5",
          label: "农村集合住宅",
        },
      ], //房屋类型
      houseValue: "", //房屋类型值
      urls: "",
      selectArea: [], //选中的区域范围
      fwlb: "",
      houseId: "", //房屋ID
      showPop: false, //展示弹窗
      showPop2: false, //展示弹窗
      showPop3: false, //展示弹窗
      typePlus: "", //当需要类型传1或者2的时候使用
      parksLayer2: {},
    };
  },
  watch: {
    lat: {
      handler(newVal) {
        this.lat = newVal;
      },
      immediate: true,
    },
    lon: {
      handler(newVal) {
        this.lon = newVal;
      },
      immediate: true,
    },
    houseId: {
      handler(newVal) {
        this.houseId = newVal;
      },
      immediate: true,
    },
    typePlus: {
      handler(newVal) {
        this.typePlus = newVal;
      },
      immediate: true,
    },
    showPop: {
      handler(newVal) {
        this.showPop = newVal;
      },
      immediate: true,
    },
    showPop2: {
      handler(newVal) {
        this.showPop2 = newVal;
      },
      immediate: true,
    },
    showPop3: {
      handler(newVal) {
        this.showPop3 = newVal;
      },
      immediate: true,
    },
  },
  methods: {
    getHouseType(e) {
      this.urls = "";
      // 城镇住宅-city_on_house，城镇非住宅-city_non_house，
      //农村独立住宅-village_dl_house，农村集合用房-village_jh_house，农村非住宅-village_non_house
      if (e == 1) {
        this.fwlb = "city_on_house";
        //城镇住宅
        this.urls =
          "https://gis.sdhuan.cn/arcgis/rest/services/2022370800cityon/MapServer";
        // 'https://gis.sdhuan.cn/arcgis/rest/services/370800cityon/MapServer'
      } else if (e == 2) {
        this.fwlb = "city_non_house";
        //城镇非住宅
        this.urls =
          "https://gis.sdhuan.cn/arcgis/rest/services/2022370800citynon/MapServer";
        // 'https://gis.sdhuan.cn/arcgis/rest/services/370800citynon/MapServer'
      } else if (e == 3) {
        this.fwlb = "village_dl_house";
        //农村独立住宅
        this.urls =
          "https://gis.sdhuan.cn/arcgis/rest/services/2022370800villagedlfz/MapServer";
        // 'https://gis.sdhuan.cn/arcgis/rest/services/370800villagedl/MapServer'
      } else if (e == 4) {
        this.fwlb = "village_non_house";
        //农村非独立住宅
        this.urls =
          "https://gis.sdhuan.cn/arcgis/rest/services/2022370800villagenon/MapServer";
        // 'https://gis.sdhuan.cn/arcgis/rest/services/370800villagenon/MapServer'
      } else if (e == 5) {
        this.fwlb = "village_jh_house";
        //农村集合住宅
        this.urls =
          "https://gis.sdhuan.cn/arcgis/rest/services/2022370800villagejh/MapServer";
        // 'https://gis.sdhuan.cn/arcgis/rest/services/370800villagejh/MapServer'
      } else if (e == 6) {
        this.fwlb = "city_on_house";
        //城镇住宅
        this.urls =
          "https://gis.sdhuan.cn/arcgis/rest/services/2022370800cityon/MapServer";
      } else {
        this.fwlb = "city_on_house";
        //城镇住宅
        this.urls =
          "https://gis.sdhuan.cn/arcgis/rest/services/2022370800cityon/MapServer";
      }
      this.houseId = "";
      // this.type = ''
      this.typePlus = "";
      this.showPop = false;
      this.showPop2 = false;
      this.showPop3 = false;
      this.type = e;
      this._createMapView();
    },

    //创建地图
    _createMapView: function () {
      const _self = this; //定义一个_self防止后续操作中this丢失
      const option = {
        url: "https://js.arcgis.com/4.18/init.js",
        css: "https://js.arcgis.com/4.18/esri/themes/light/main.css",
      };

      //通过loadModules来做衔接
      loadModules(
        [
          "esri/Map",
          "esri/views/MapView",
          "esri/config",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer",
        ],
        option
      )
        .then(([Map, MapView, esriConfig, GraphicsLayer, FeatureLayer]) => {
          esriConfig.apiKey =
            "AAPKdf2979e7d74a47c89d398c8715dc6272d1rJcplaaCYMDoyFMXavlgP41dIAEJ1AtiD_HaH4zbxgkpbazqf9C9E3pveLBGsG";
          //业务代码在此处编写
          const map = new Map({
            //实例化地图
            basemap: "satellite",
          });
          this.map1 = map;

          const view = new MapView({
            //实例化地图视图
            container: "mapview3",
            map: map,
            zoom: 18,
            center: [this.lon, this.lat],
          });
          this.view1 = view;

          view.on("double-click", function (event) {
            event.stopPropagation();
          });

          const graphicsLayer = new GraphicsLayer();
          map.add(graphicsLayer);

          this.parksLayer = new FeatureLayer({
            url: this.urls,
          });
          this.map1.add(this.parksLayer, 0);
          if (this.fwlb == "village_dl_house") {
            this.parksLayer2 = new FeatureLayer({
              url:
                "https://gis.sdhuan.cn/arcgis/rest/services/2022370800villagefz/MapServer",
            });
            this.map1.add(this.parksLayer2, 0);
          }
          var that_ = this;
          view.on("click", function (event) {
            view.hitTest(event).then((res) => {
              if (res.results[0].graphic) {
                console.log(res.results[0].graphic.geometry);
                that_.queryFeatureLayer3(view, res.results[0].graphic.geometry.centroid);
              }
            });
          });
        })
        .catch((err) => {
          _self.$message("地图创建失败，" + err);
        });
    },

    clearMapView() {
      this.selectData = [];
      this.selectArea = [];
      this.view1.popup.close();
      this.view1.graphics.removeAll();
    },
    //查询条件下的数据
    queryFeatureLayer3(view, extent) {
      const parcelQuery = {
        spatialRelationship: "intersects", // Relationship operation to apply
        geometry: extent, // The sketch feature geometry
        outFields: ["fwbh"], // Attributes to return
        returnGeometry: true,
      };

      this.parksLayer
        .queryFeatures(parcelQuery)
        .then((results) => {
          this.displayResults3(view, results);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    displayResults3(view, results) {
      var symbol = {};
      // a：绿色；b：蓝色；c：黄色；d：红色；基本安全默认b;不安全默认c；
      if (this.dj == 1) {
        symbol = {
          type: "simple-fill",
          color: [20, 130, 200, 0.5],
          outline: {
            color: "green",
            width: 3,
          },
        };
      } else if (this.dj == 2) {
        symbol = {
          type: "simple-fill",
          color: [20, 130, 200, 0.5],
          outline: {
            color: "blue",
            width: 3,
          },
        };
      } else if (this.dj == 3) {
        symbol = {
          type: "simple-fill",
          color: [20, 130, 200, 0.5],
          outline: {
            color: "yellow",
            width: 3,
          },
        };
      } else if (this.dj == 4) {
        symbol = {
          type: "simple-fill",
          color: [20, 130, 200, 0.5],
          outline: {
            color: "red",
            width: 3,
          },
        };
      } else {
        symbol = {
          type: "simple-fill",
          color: [20, 130, 200, 0.5],
          outline: {
            color: "gray",
            width: 3,
          },
        };
      }
      var popupTemplate = {};
      popupTemplate = {
        title: "房屋编号： {fwbh}",
        content: "地址：" + this.address,
      };

      // Assign styles and popup to features
      if (results.features.length > 0) {
        results.features.map((feature) => {
          feature.symbol = symbol;
          feature.popupTemplate = popupTemplate;
          return feature;
        });
        var fwbh = results.features[0].attributes.fwbh;
        var id = "";
        //走接口获取到房屋ID，刷新详情
        if (this.type == "1") {
          //城市独立
          getCityId(fwbh).then((res) => {
            console.log(res.data.data);
            if (res.data.code == 200) {
              id = res.data.data;
              // var str = 'id=' + id + '&type=' + this.type
              // this.$emit('refreshDetail', str)
              this.houseId = id;
              this.typePlus = 2;
              this.showPop = true;
            }
          });
        } else if (this.type == "2") {
          getNoCityId(fwbh).then((res) => {
            if (res.data.code == 200) {
              id = res.data.data;
              // var str = 'id=' + id + '&type=' + this.type
              // this.$emit('refreshDetail', str)
              this.houseId = id;
              this.typePlus = 1;
              this.showPop = true;
            }
          });
        } else if (this.type == "3") {
          getVillageDlId(fwbh).then((res) => {
            if (res.data.code == 200) {
              id = res.data.data;
              // var str = 'id=' + id + '&type=' + this.type
              // this.$emit('refreshDetail', str)
              this.houseId = id;
              this.typePlus = 1;
              this.showPop2 = true;
            }
          });
        } else if (this.type == "5") {
          getVillageJhId(fwbh).then((res) => {
            if (res.data.code == 200) {
              id = res.data.data;
              this.houseId = id;
              this.typePlus = 3;
              this.showPop2 = true;
              // var str = 'id=' + id + '&type=' + this.type
              // this.$emit('refreshDetail', str)
            }
          });
        } else if (this.type == "4") {
          getNonVillageId(fwbh).then((res) => {
            if (res.data.code == 200) {
              id = res.data.data;
              this.houseId = id;

              this.showPop3 = true;
              // var str = 'id=' + id + '&type=' + this.type
              // this.$emit('refreshDetail', str)
            }
          });
        } else {
          getCityId(fwbh).then((res) => {
            if (res.data.code == 200) {
              id = res.data.data;
              this.houseId = id;
              this.typePlus = 2;
              this.showPop = true;
              // var str = 'id=' + id + '&type=' + this.type
              // this.$emit('refreshDetail', str)
            }
          });
        }
      } else {
        // this.$message('查询房屋失败，请重试！')
      }

      // Clear display
      view.popup.close();
      view.graphics.removeAll();
      // Add features to graphics layer
      view.graphics.addMany(results.features);
    },
    setShow() {
      this.houseId = "";
      // this.type = ''
      this.typePlus = "";
      this.showPop = false;
      this.showPop2 = false;
      this.showPop3 = false;
    },
  },
};
</script>

<style>
.mapview-pannel2,
#mapview3 {
  position: absolute;
  width: 100%;
  /* margin-top: 30px; */
  height: 95%;
}

.top {
  background: #fff;
  height: 50px;
  line-height: 50px;
}

.rowclass {
  margin-left: 10px;
  margin-left: 10px;
}
</style>
